<template>
  <div class="m-crumb">
    <div class="m-item" v-for="(item, index) in list" :key="index">{{ item.name }}</div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },

  methods: {
    /**
     * 跳转到面包屑对应的页面
     * @param { Object } crumb 当前面包屑导航对象
     */
    toCrumbPageHander (crumb) {
      // 如果当前有没有链接
      if (!crumb.href) {
        return
      }
      this.$router.push(crumb.href)
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable";

.m-crumb {
  padding: 20px 0px;
  overflow: hidden;
  .m-item {
    cursor: pointer;
    color: @font-color;
    float: left;
    padding-right: 25px;
    position: relative;
    &:hover {
      text-decoration: underline;
    }
    &:after {
      color: @font-color;
      content: ">";
      display: block;
      position: absolute;
      right: 7px;
      top: 0px;
    }
    &:last-child {
      &:after {
        display: none;
      }
    }
  }
}
</style>
